<template>
  <div>
    <el-table v-loading="loading" :data="receiptList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.receiptDetails">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="房屋名称" align="center" prop="roomName" />
            <el-table-column label="收费项目" align="center" prop="chargeId" :formatter="itemFormat"/>
            <el-table-column label="收费标准" align="center" prop="normNames" />
            <el-table-column label="计费结束时间" align="center" prop="beginTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="计费结束时间" align="center" prop="finishTime">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="prices" />
            <el-table-column label="缴费时长" align="center" prop="paymentCycle" />
            <el-table-column label="应收金额" align="center" prop="receivableMoney" >
              <template slot-scope="scope">
                <el-link type="primary" @click="handleCostDetails(scope.row)">{{scope.row.receivableMoney}}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="冲抵金额" align="center" prop="amountAmount" />
            <el-table-column label="实收金额" align="center" prop="billMoney" />
            <el-table-column label="优惠金额" align="center" prop="specialMoney" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="单号" align="center" prop="no" />
      <el-table-column label="客户" align="center" prop="ownerName" />
      <el-table-column label="收款人" align="center" prop="billUser" />
      <el-table-column label="收款日期" align="center" prop="billDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.billDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="应收金额" align="center" prop="receivableMoney" />
      <el-table-column label="实收金额" align="center" prop="billMoney" />
      <el-table-column label="找零金额" align="center" prop="oddChangeMoney" />
      <el-table-column label="转存金额" align="center" prop="transferAmount" />
      <el-table-column label="审核状态" align="center" prop="auditStatus" :formatter="auditStatusFormat" />
      <el-table-column label="开票状态" align="center" prop="invoiceStatus" :formatter="invoiceStatusFormat" />
      <!--<el-table-column label="优惠政策" align="center" prop="preferentialId" />-->
      <!--<el-table-column label="优惠折扣" align="center" prop="discount" />-->
      <!--<el-table-column label="备注" align="center" prop="remark" />-->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-divider></el-divider>
    <div class="operate-but">
      <el-button type="primary"  plain size="mini">优惠设置</el-button>
      <el-button type="primary"  plain size="mini">改费</el-button>
      <el-button type="primary"  plain size="mini">删除</el-button>
      <el-button type="primary"  plain size="mini">备注说明</el-button>
    </div>

    <receivable-list ref="receivableRef" />
  </div>
</template>

<script>
  import { listReceipt, getReceipt, delReceipt, addReceipt, updateReceipt, exportReceipt } from "@/api/payfee/receipt";
  import { listItem } from "@/api/payfee/item";
  import ReceivableList from "../ReceivableList"
  export default {
    name: "Receipt",
    components:{ReceivableList},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 收款单表格数据
        receiptList: [],
        // 审核状态字典
        auditStatusOptions: [],
        // 开票状态字典
        invoiceStatusOptions: [],
        // 单据状态字典
        documentStatusOptions: [],
        //收费项目字典
        itemOptions:[],
        //收费类型字典
        projectOptions:[],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          no: null,
          roomId: null,
          ownerId: null,
          billUser: null,
          billDate: null,
          receivableMoney: null,
          billMoney: null,
          oddChangeMoney: null,
          transferAmount: null,
          auditStatus: null,
          invoiceStatus: null,
          documentStatus: null,
          preferentialId: null,
          discount: null,
        },
        currentOptions:{}
      };
    },
    created() {
      this.getDicts("audit_status").then(response => {
        this.auditStatusOptions = response.data;
      });
      this.getDicts("invoice_status").then(response => {
        this.invoiceStatusOptions = response.data;
      });
      this.getDicts("document_status").then(response => {
        this.documentStatusOptions = response.data;
      });
      listItem().then(res=>{
        this.itemOptions = res.rows;
      })
    },
    methods: {
      init(options){
        this.currentOptions = options
        this.getList()
      },
      /** 查询收款单列表 */
      getList() {
        this.loading = true;
        this.queryParams.roomId = this.currentOptions.roomIds
        listReceipt(this.queryParams).then(response => {
          this.receiptList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 审核状态字典翻译
      auditStatusFormat(row, column) {
        return this.selectDictLabel(this.auditStatusOptions, row.auditStatus);
      },
      // 开票状态字典翻译
      invoiceStatusFormat(row, column) {
        return this.selectDictLabel(this.invoiceStatusOptions, row.invoiceStatus);
      },
      // 单据状态字典翻译
      documentStatusFormat(row, column) {
        return this.selectDictLabel(this.documentStatusOptions, row.documentStatus);
      },
      // 收费项目字典翻译
      itemFormat(row, column) {
        let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
        if(index != -1){
          return this.itemOptions[index].chargeName
        }
        return '';
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.receiptId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      handleCostDetails(row,){
        this.$refs.receivableRef.show(row,'view')
      },
    }
  };
</script>
<style lang="scss" scoped>
  .operate-but{
    text-align: center;
  }
</style>
